Voor deze opdracht moest ik bij andere klasgenoten in hun wiki kijken en onderzoeken wat ik al beheers en wat ik van anderen kan leren. Dit gaat dan voornamelijk over de onderdelen HTML en CSS maar ook het gedeelte documentatie. In deze wiki pagina heb ik onder andere voorbeelden van anderen neergezet en bijbehorende bronnen van MDN. Ook zal ik uitleggen hoe ik dit bijvoorbeeld in mijn code of wiki ga verbeteren. Ik heb 3 mensen uit van verschillende tafels uitgekozen zodat ik een beter beeld krijg welke technieken er worden gebruikt.

Als eerste heb ik de pagina van Jesse bekeken, hiervoor heb ik de Repository van OBA gekozen. Ik heb eigenlijk bij iedereen de repo van de opdrachtgever gekozen omdat daar de recent geleerde en de complexere dingen in staan. Het eerste wat ik tegenkwam was dat hij het element table gebruikt. Dit kan heel erg handig zijn om tabellen te maken. Want als je bijvoorbeeld prijzen of andere informatie goed van elkaar gescheiden wilt houden is dit een goede oplossing. Voor een tabel worden in Jesse zijn code 3 verschillende elementen gebruikt namelijk:

Table HTML van Jesse

• tr
  Hiermee kun je een tabel aanmaken, als je de 2 elementen van hieronder verwerkt kan je de hoeveelheid rijen en kolommen aanpassen.

• th Met dit element is het mogelijk om de header voor een tabellen-groep aan te maken. Hier heb je 2 opties voor namelijk verticaal: <th scope="row">#</th> en horizontaal: <th scope="col">#</th>. row en col staan natuurlijk voor 'rows' en 'columns'.

• td Daarnaast is er ook nog dit element. Hiermee kun je data toewijzen aan de headers die je eerder hebt gemaakt. Bijvoorbeeld: <td>#</td>

Voor de html heb ik het gebruik van tables geleerd. Ik had dit nog niet eerder deze gezien dus het verbaasde me dat het bestond. Ik ga dit voor mijn Funda project nog niet gebruiken omdat ik het nergens kwijt kan in mijn pagina. Maar voor de volgende keer weet ik in ieder geval wat is en en doet.

Wat ik ook nog in de HTML zag dat het allemaal heel netjes geschreven was. Omdat er meerdere pagina's/html bestanden worden gebruikt is het erg overzichtelijk. Daarnaast worden er ook classnames gebruikt die makkelijk van elkaar te onderscheiden zijn. Voor de volgende sprint ga ik weer mijn HTML herschrijven en dan ga ik dit ook doen.

De enige tip die ik kon vinden was dat er soms een alt"" was vergeten in te voegen. Dit zorgt ervoor dat mensen met een screenreader geen idee hebben wat er op het scherm staat.

Op het gebied van CSS kwam ik ook nog iets tegen wat ik nog niet eerder van gehoord had. En dat is het gebruik van het :where() element. Ik had al wel eerder van 'before' en 'after' gehoord maar nog niet van dit element. Het element 'where' is samen met 'is' nog redelijk kort geleden toegevoegd aan CSS. 'where' valt onder de pseudo-classes binnen CSS. Dit zijn selectoren die elementen kunnen selecteren op basis toestand, positie in de HTML/CSS, of acties kunnen uitvoeren op het gebied van gebruikersinteractie.

In dit geval past 'where' de documentstructuur aan en zorgt ervoor dat de CSS veel korter kan worden geschreven. Dit zorgt weer voor een betere structuur binnen CSS. Hieronder heb ik een voorbeeld ingevoegd van 'is'. Dit lijkt qua gebruik een beetje op 'where':

mkyjox1HJNL0AgtX25bi.mp4

Zelf heeft Jesse het gebruikt om een betere structuur te creëren. Zo hoeven de classes card en de bijbehorende image niet meer apart geschreven te worden. Hieronder heb ik dat stukje uit zijn code neergezet: gebruik van :where() Jesse Iets wat nog wel een probleem kan opleveren is dat niet alle browsers dit ondersteunen, dit komt omdat dit element nog redelijk nieuw is.

We zijn nu heel erg veel bezig met het schrijven van een betere structuur binnen CSS. We hebben al het gedeelte custom properties geleerd en ook Atomic Design. Bij de volgende sprint ga ik natuurlijk weer mijn CSS aanpassen en nog beter structureren, ik kan daarbij deze functie heel erg goed gebruiken.

Als tip zag ik dat niet alle kleuren werden geschreven met een Custom Property binnen de root. Om alles perfect te schrijven kan dit ook nog aangepast worden. Maar vooralsnog was alles wederom heel netjes geschreven.

Tenslotte heb ik ook nog even in de wiki gekeken. Voor deze repo staat alles heel mooi op volgorde van de DLC genoteerd. Ook het gebruik van Emojis is erg leuk. Daarnaast worden er ook hele goede code voorbeelden binnen de verschillende onderwerpen gegeven.

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
• https://web.dev/articles/css-is-and-where
• https://github.com/OvenMagnetron/oba/wiki
• https://github.com/OvenMagnetron/oba

Ook heb ik de pagina van Christopher bekeken, hiervoor heb ik een oudere repo van de client website uitgekozen. Hier zag ik ook dat hij meerdere HTML bestanden aan het gebruiken is. Daarnaast kwam ik weer iets tegen dat ik zelf nog niet gebruik. Namelijk no-refresh. Dat zit vast aan het 'rel' element binnen de html. rel wordt vooral gebruikt in a, link of form elementen om pagina's aan elkaar te linken. Zo gebruiken we natuurlijk rel om een CSS file te linken aan onze HTML door link rel="stylesheet" in de head van de HTML neer te zetten. Als ik in Christopher zijn CSS kijk zie ik dat hij 'no-refresh' gebruikt om van pagina te wisselen als er op een kaart in zijn pagina klikt. Ik kon dit niet bevestigen omdat er error ontstond toen ik zijn site probeerde te openen. Ik heb hieronder een snippet van zijn code ingevoegd: https://github.com/christoph3r3w/MiddenWest-client-website/blob/4c6e199e5dfd406db4f816b53845d1bd3cb94999/test-filter.html#L37-L51.

En ten slotte nog en voorbeeld hoe ik 'rel' in mijn site gebruik:

Over het algemeen was de code hier ook goed geschreven. Zo hebben classes een duidelijke naam gekregen en is het overzichtelijk zodat het goed te lezen is. Alleen was hier ook veel vergeten om alt elementen in te voeren.

Ook heb ik nog even in de CSS gekeken. Hier kwam ik ook iets tegen dat ik zelf niet gebruik en dat is '-webkit-background-clip: text;'. Zelf gebruik ik nog niet het webkit element binnen mijn site. Het webkit element is een render element dat er voor zorgt dat styling op zowel safari als Chrome goed kan worden ingeladen. De CSS elementen die hiervoor worden gebruikt zijn:

• background-clip

Zorgt ervoor hoe ver een achterkant van een background doorloopt.

• text-fill-color

Hiermee kan je de tekst een kleur geven

• text-stroke

Hiermee kun je zowel de kleur als 'lengte' van de tekst aanpassen.

Ik heb het zelf nog niet gebruikt maar ga er wel even naar kijken. Zo kan het zijn dat bijvoorbeeld sommige dingen op mijn site in beide browsers goed werken. Zelf gebruik ik namelijk alleen Safari om te debuggen en te testen en hiermee kan ik kijken of het op Chrome er beter uit komt te zien.

Hieronder heb ik een snippet van zijn CSS neergezet: Webkit

Voor de rest is ook zijn CSS goed geschreven en gebruikt hij ook custom proporties, zowel voor kleuren als voor marges. Maar ook hier waren er soms een paar vergeten.

Tenslotte heb ik ook nog even naar zijn wiki gekeken. Ook hier staat alles op volgorde van de DLC genoteerd. En worden titels geschreven met emoji's en ook hier worden er code voorbeelden in de wiki gezet, alles is dus goed duidelijk. Het enige wat ik nog mis (wat ik zelf wel doe) is iets grotere verhalen schrijven over wat er allemaal gedaan is. Maar zoals ik al zei is alles duidelijk.

• https://github.com/christoph3r3w
• https://github.com/christoph3r3w/MiddenWest-client-website/blob/main/styles/test-filter.css#L92-L94
• https://github.com/christoph3r3w/MiddenWest-client-website/blob/main/test-filter.html
• https://github.com/christoph3r3w/MiddenWest-client-website/wiki
• https://developer.mozilla.org/en-US/docs/Glossary/WebKit
• https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel

Ten slotte heb ik ook nog naar de repo van Anna-Kyra gekeken. Hier heb kwam ik niet heel veel dingen tegen die ik zelf niet gebruik. Alleen het gebruik van <style></style> is iets wat ik zelf niet gebruik. Dit komt omdat ik het liefst alle styling in CSS neerzet. Voor de rest is de HTML wel netjes geschreven en worden er ook duidelijke namen aan classes gegeven.

Hieronder heb ik een voorbeeld van haarzelf en van MDN neergezet:

Gebruik van style

Op het gebied van CSS kon ik ook niet heel erg veel dingen vinden die ik niet begreep/ niet gebruik. Eén ding dat ik nog wel tegen kwam is het gebruik van scroll-behavior:. Standaard staat dit op 'auto' maar als het op 'smooth' wordt gezet zorgt dit ervoor dat er een kleine animatie komt als er tussen onderdelen op een pagina wordt gewisseld.

Hieronder heb ik een video en de snippet als voorbeeld neergezet:

Scrollbar

En daarnaast heeft ze de code heel netjes en gestructureerd geschreven. Zo wordt er veel gebruik gemaakt van & om child-elements korter te schrijven. En is het fijn dat het ook in de secties: header, main en footer is geschreven. Tenslotte zijn hier ook weer goede namen gegeven aan de custom properties want er worden veel afkortingen gebruikt voor buttons en kleuren.

Zelf ga ik voor de volgende sprint mijn CSS herschrijven en kijken of ik dit ook kan gebruiken. Zo kan ik misschien weer 10% van mijn code opschonen.

Ook heb ik nog even in haar wiki gekeken van de client-website repo. Hier stond ook alles op basis van de DLC erin verwerkt. Alles was ook duidelijk omdat er veel images in waren gezet samen met veel tekst. Ook was het fijn dat de bronnen erbij zijn vermeld.

• https://github.com/Anna-Kyra
• https://github.com/Anna-Kyra/look-and-feel-corporate-identity
• https://github.com/Anna-Kyra/the-client-website
• https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
• https://css-tricks.com/almanac/properties/s/scroll-behavior/

Na het bekijken van de repo's van deze 3 klasgenoten heb ik weer veel dingen geleerd. En dan met name het vereenvoudigen van mijn code door het anders te schrijven/structureren in zowel HTML als CSS. Ook was het eens leuk om de websites van de anderen een keer te zien buiten je eigen opdrachtgevers-groep. En hoe hun code in elkaar zit vergeleken met jezelf.

Zelf had ik ook nog dingen in mijn code/documentatie staan die niet bij iedereen voorkwamen en dat waren deze 2 dingen:

• Gebruik van darkmode

Niemand van deze 3 had darkmode op basis op OS in hun site gezet. Ik had dat wel gedaan door in de css @media (prefers-color-scheme: dark) { neer te zetten. Dit is voor mij handig omdat funda het zelf nog niet heeft en ik de custom proporties beter leer.

• Testen neerzetten van W3C + Lighthouse in wiki

Wat ik zelf ook nog doe wat anderen niet altijd deden is het toevoegen/ testen van de W3C validator en de lighthouse test. Zelf doe ik dit wel altijd zodat ik weet wat de score de keer ervoor was en kan ik het met de volgende sprint vergelijken.