Lyrics / lyrics.github.io

Open Lyrics Database website
https://lyrics.github.io
5 stars 2 forks source link

Responsive Navigation #32

Closed andy5995 closed 3 years ago

andy5995 commented 3 years ago

What do you think about adding "reponsive navigation" using the W3.CSS Framework?

I added something like that to one of my websites and should be able to take on this issue.

snshn commented 3 years ago

That navigation widget seems to look good, but until we have to integrate international alphabets it'll unlikely benefit the site, will only slow down the load and render time.

I built that web UI from scratch mostly for it to be extremely snappy and lightweight; it almost feels like it's a progressive web app — even though those are all separate static HTML files. GitHub Pages has a monthly bandwidth limit, so every little bit counts.

In this case less is more: if we try to improve it by using CSS frameworks and/or adding more DOM, it'll only become slower and harder to customize, resulting in being as sluggish and "sticky" as those other lyrics websites.

I'd say we could add more CSS to home and search pages, in separate from the rest of the site files, but those that belong to database structure and song pages have to really be as light as possible. Truth being told it's already not as fast as it was before I added dark CSS and some SVG assets; I've been meaning to give it a small refactor, but some features like that dark CSS just have to be there in 2020.

Also, this is not the only way to work with this database, there's lyrics-api that makes it possible to self-host the database for music players, the site is mainly there for search engines and mobile use, it doesn't need any advanced features or enhancements really.

andy5995 commented 3 years ago

Ah, makes sense. I'm not too good with CSS or HTML... or databases but I get the gist.

snshn commented 3 years ago

I think in this case it's quite opposite — better to be bad with CSS and HTML — since the website tries to be as thin of a layer as possible between the user and database. Hence the snappiness and good compatibility with w3m/lynx