View preview
The main functionality of the app is displaying the most popular tracks of an artists. Spotify currently has this feature implemented, but with limitations. Spotify only showcases the top 10 most popular tracks of an artist on their page. This app also showcases the most popluar tracks, but without the limitation of 10 tracks.
Actor diagram (Week 2)
Actor diagram (Week 3)
Interaction diagram (Week 2)
Interaction diagram (Week 3)
The Spotify Web API Based on simple REST principles, the Spotify Web API endpoints return JSON metadata about music artists, albums, and tracks, directly from the Spotify Data Catalogue.
There aren't any restrictions mentioned in the docs of REST Countries.
Here is the format in which the API returns it's data (fetching artists by search query in string format):
{
"artists" : {
"href" : "",
"items" : [{
"id" : "",
"name" : "",
}],
}
}Clone the project
git clone https://github.com/meessour/web-app-from-scratch-1920.gitInstall the http-server package
npm i -g http-serverRun local server
hs-
Filter for excluding/including (re)mixes, radio edits, live performances, extended versions, features, remastered versions, album versions, etc.
-
Let the user choose how many tracks need to be shown
-
Create playlist of all the tracks
-
Replace the original generated playlist by the newly looked up artist
-
Let the user choose between "create new playlist" and "replace old one"
-
A better way of hiding the token
-
Light weight web player that only works if musix plays on external device. Controllable by media keys
Deze sectie gaat over toepassingen van Progressive enhancement. Er wordt getest via de Chrome browser via desktop
Ik ga deze web app testen op de volgende beperkingen:
- Afbeeldingen uitzetten
- Custom fonts uitzetten
- Kleur uitzetten & kleurenblindheid instellen
- Muis/Trackpad werkt niet
- Breedband internet uitzetten
- Javascript (volledig)
- Cookies niet accepteren
- localStorage doet het niet
Na het uitzetten van de afbeeldingen was de titel/omschrijving van de app niet te lezen. Dit komt omdat de achtergrond en text dezelfde kleur hebben
Zie voorbeeld
De tweede bevinding is dat de achtergrond van de zoekresultaten niet te zien is omdat het dezelfde kleur is als de achtergrond.
Ook wordt er een iccontje getoond op de locatie waar normaal de foto van de artiest te zien is.
Daarnaast is de outlining van verschillende artiesten in de lijst niet gelijk.
Zie voorbeeld
Tot slot is er in de resultaten lijst een te grote afstand tussen de positienumering en tracknaam.
Zie voorbeeld
Na het uitzetten van de font functioneert de site nog exact hetzelfde. Door de automtische "fallback" font is de text moeilijker te lezen en past het niet bij de site.
Zie voorbeeld
Na het uitzetten van de kleuren is alles op de site nog goed te lezen. Wel is het moeilijk om de track resultaten sectie te onderscheiden van de achtergrond, ze hebben allebei een zwarte kleur nu.
Zie voorbeeld
Het is mogelijk om via TAB en/of SHIFT+TAB te navigeren tussen klikbare elementen op de site. Dit zijn: de zoekbalk, de zoekresultaten en open een track in spotify. Elementen zijn te selecteren door op ENTER te klikken.
Na het uitzetten van het internet wordt er autmoatisch een foutmedlign gegeven aan de gebruiker, alleen bevat deze geen tekstinhoud. Dit gebeurd zodra de gebruiker probeert te zoeken op een term of een zoekresultaat aan klikt.
Zie voorbeeld
Na het uitzetten van javascirpt worden er geen zoekresultaten en track resultaten weer gegeven. Er wordt ook geen feedback aan de gebruiker gegeven waardoor de grbuiker niet weet wat er aan de hand is. Het kan er voor zorgen dat de gebruiker denkt dat er nog wat geladen moet worden en kijkt vervolgens dan voor een lange periode naar het scherm, hopende dat er nog wat geladen zal worden.
Zie voorbeeld
Na het uitzetten van de cookies worden er geen zoekresultaten en track resultaten weer gegeven. Er wordt een fout melding gegeven.
Zie voorbeeld
Na het uitzetten van de localStorage worden er geen zoekresultaten en track resultaten weer gegeven. Er wordt een fout melding gegeven.
Zie voorbeeld
In microsoft edge werkte alles prima, alleen is er een visuele beperking bij het verkleinen van het scherm. De gebruiker is in staat om buiten de content (naar rechts) te scrollen. Het lijkt wel alsof er geen maxmimale width aanwezig is.
Zie voorbeeld
Daarnaast werd er een waarschuwing in the console getoond:
SEC7139: [CORS] The origin 'https://meessour.github.io' used the maximum Access-Control-Max-Age value of '604800' as the provided value exceeded this for a cross-origin request to 'https://api.spotify.com/v1/search?q=k&type=artist&limit=5'.
Op Firefox (desktop) functioneerde alles naar wens
In Safari op een iPhone/iPad en Chrome op een iPad, waren er enkele visuele problemen. De titel van de site heeft een te grote afstand per letter. Voor een fractie van een seconde ziet de achtergrond er vreemd uit.
Zie voorbeeld iPhone Safari
Zie voorbeeld iPad Chrome
Daarnaast is de outlining van track items niet hetzelfde (Niet het geval op iPad (Chrome/Safari)).
Zie voorbeeld iPhone Safari
In Firefox op een mobiel werkte alles naar wens. Er was alleen een ongewenste visuele eigenschap tijdens het indrukken van de zoekbalk. De zoekbalk werd dan heel erg transparant, waardoor de placeholder tekst niet meer goed te lezen was
Zie voorbeeld
In Internet Explorer werkte eigenlijk helemaal niks. Geen items werden ingeladen, er werd geen user feedback gegeven en de console gaf wat warnings en errors. Visueel zag alles er normaal uit.
Zie voorbeeld
Voor het uitlezen van de inhoud van de site gebruikt ik (Pericles: Text to Speech Screen Reader): https://chrome.google.com/webstore/detail/pericles-text-to-speech-s/oacindbdmlbdeidohafnfocfckkhjlbg
De titel/omschrijving van de site werd opgelezen en all track resultaten. De zoek resultaten van de artiesten werden niet opgelezen.
Zie wat niet werd voorgelezen
MIT © Mees Sour