Daan645 / lose-your-head-the-client-case

Ontwerp en maak een website voor een opdrachtgever op basis van een Headless CMS API

https://lose-your-head-the-client-case-5q6r.vercel.app/

0 stars 1 forks source link

Standaard button component maken #16

Closed Daan645 closed 1 month ago

Daan645 commented 1 month ago

We willen een standaard button component maken die overal te hergebruiken is.

Daan645 commented 1 month ago

JS Test

Ik heb de button getest zonder javascript alles werkt aan de button behalve de klik animatie, dit is niet erg omdat dit een enhancement is!

Daan645 commented 1 month ago

CSS Test

Ik heb een test gedaan waarbij ik de CSS uit heb gezet de knop was nogsteeds bruikbaar!

Schermafbeelding 2024-10-01 om 15 49 12

Daan645 commented 1 month ago

Responsive test

De knop is responsive tot 300px en zelfs verder als het scherm kleiner wordt gaat de text weg en is er alleen nog het whatsapp logo.

Daan645 commented 1 month ago

Browser test

Ik heb de button op de volgende browsers getest: Chrome, safari, arc en firefox

Arc In arc werkte de knop naar behoren en zag ie er precies zo uit als ik hem gebouwd heb.
Safari
op safari was ook alles precies hetzelfde!
Firefox Ook in firefox geen aanmerkingen
Chrome Ook in chrome werkt alles goed

Daan645 commented 1 month ago

Lighthouse test

Mijn bevindingen In mijn eerste lighthouse test had ik een een slechtere accesibility. Ook had ik slechte peformance, dit kwam door een javascript animatie functie.

Oplossing en resultaat

Ik had een klik animatie gemaakt alleen voegde deze eigenlijk niet zoveel toe dus deze heb ik verwijderd voor een betere peformance. Ik heb de accesibility beter gemaakt door het de a een title element te geven dit waren de resultaten:

Mobile:

Desktop:

TomDeeterink1 commented 1 month ago

He @Daan645 je button is nog niet helemaal ready. Ik pas hem even aan.