My attempt to refresh the phpMyAdmin website

[robinheidrich]

I had the motivation to refresh the phpMyAdmin website a bit, i.e. update Bootstrap, add darkmode and improve the design a bit. Not a complete redesign, but just nice little changes.

These are some of the things I've done so far:

• Updated Bootstrap from 5.2.3 to 5.3.3, which introduces color modes. This means darkmode works, it automatically selects the system's preferred theme, and you can change it yourself.
• Font Awesome has been removed, Bootstrap Icons SVGs are used instead.
• Most titles (on hovering elements) have been removed, the only remaining ones are the download buttons, which have been replaced by tooltips.
• The Google Analytics code was outdated, I updated it to use gtag. (Should not require any changes on your part)
• The "verify-v1" meta tag has been removed as it is deprecated. Must be replaced with "google-site-verification", you would probably have to get a new code for it.
• Other meta tags or links removed because they are not standard: "image_src", "vcs-git", "vcs-browse", "copyright", "robots" (is already "index, follow" by default) - were any of these necessary?
• jQuery has been removed.

What I want to do before the PR comes:

• I have removed Colorbox (jQuery plugin) and still need to find an alternative.
• Every table needs to be adjusted to be responsive.
• Improve some pages.

What I would suggest:

• The book recommendations are for old versions that are no longer supported. Can they be removed or are they still relevant?
• A new favicon, the current one looks outdated and fuzzy.
• The phpMyAdmin logo as SVG instead of PNG. I couldn't find an SVG, only the huge one from Wikipedia.
• Remove the alt texts from the sponsor images unless it serves some purpose?

Finally, some screenshots:

Home page

Current:

Download modal

Current:

Footer

I have seen that the current website should have an email icon in the footer, but it is not displayed due to missing CSS. So "Contact" just sends an email to "developers@phpmyadmin.net". The footer is always placed at the bottom.

Current: (I know, Twitter was better)

I look forward to your feedback and hope that you would like such a PR, at least I think that the phpMyAdmin website definitely needs a darkmode.

[williamdes]

Hi @robinheidrich
Would you mind opening PRs for your work ?

[robinheidrich]

@williamdes Sorry for the late reply. I have it on my old computer, but will try to do a PR soon.

But it's pretty messed up I think, I went straight to it and didn't do any commits. If it would be better, I can also do PRs with the individual changes.

[williamdes]

But it's pretty messed up I think, I went straight to it and didn't do any commits. If it would be better, I can also do PRs with the individual changes.

Sure, you can open the PRs. And ping me for a review or if I miss the notification

[robinheidrich]

@williamdes I am currently continuing with the website and am curious: Is “planet.phpmyadmin.net” still being used? It says last updated 2023.

I would rather use a CDN for Bootstrap instead of hosting it. But the Planet website would also have to switch to it because it currently uses the static Bootstrap files from the phpMyAdmin website.

(And I hope a big commit full of changes isn't too bad, it was just easier this way)

And while I'm at it, what about test-data, sponsors-subscribe.html and contest.html? The first two seem to be unused.

[williamdes]

@williamdes I am currently continuing with the website and am curious: Is “planet.phpmyadmin.net” still being used? It says last updated 2023.

Nope, I need to remove the infrastructure

I would rather use a CDN for Bootstrap instead of hosting it. But the Planet website would also have to switch to it because it currently uses the static Bootstrap files from the phpMyAdmin website.

Do not use a CDN, this violates GDPR rules

And while I'm at it, what about test-data, sponsors-subscribe.html and contest.html? The first two seem to be unused.

Maybe remove them in a separate PR and we will see

[robinheidrich]

But jsDelivr is GDPR compliant, isn't it?

When we collect, use, and process personal data, we are subject to the provisions of the UK General Data Protection Regulation (UK GDPR) and the Data Protection Act 2018. We are also subject to the EU General Data Protection Regulation (EU GDPR) in relation to personal data we collect, use, and process in the European Economic Area (EEA).

https://www.jsdelivr.com/terms/privacy-policy

And Bootstrap recommends it itself.

https://getbootstrap.com/docs/5.3/getting-started/introduction/

Anyway, I've made some more changes to the website. Does it look okay so far? There are still a few pages missing, but then I'll open the PR.

The team page now uses GitHub avatars, I hope that's ok!

Screenshots

[williamdes]

But jsDelivr is GDPR compliant, isn't it?

No provider will be, please host the assets in our website :)
Explained in simple terms: Companies non EU based can not collect data from the EU. And still, EU in EU requires banners to require consent.
Here is some thread about lawsuits on websites using Google fonts, leaking the user IP: https://forum.bubble.io/t/legal-problem-with-google-fonts-gdpr-german-court-ruling/220822/16
What a mess, stop using CDNs: https://news.ycombinator.com/item?id=30334109

"They’re just not useful to serve static dependencies off-site in hopes of users hitting a primed cache from another site, because of cache partitioning"
Browsers partition cache now, the benefit is limited.
And devs do crap using multiple CDNs per website, making it even slower to load the website.
DNS + TLS + fetching. When now there is HTTP/2&3 do fetch all from one connection.

Anyway, I've made some more changes to the website. Does it look okay so far? There are still a few pages missing, but then I'll open the PR.

The changes look great !
Please open a PR

PS: You can do a previous members section and move "Dan" to it.
@devenbansod is your current position okay ?

The team page now uses GitHub avatars, I hope that's ok!

Well, I guess we can keep it as it is for now. But maybe it would be better to host them.

[williamdes]

Other meta tags or links removed because they are not standard: "image_src", "vcs-git", "vcs-browse", "copyright", "robots" (is already "index, follow" by default) - were any of these necessary?

robots is a "standard" meta tag: https://robots-txt.com/meta-robots/
Maybe keep it
others can be removed
such small changes it would be best to open a PR for each so we slowly trim down the work pile to your important work

[robinheidrich]

Understood. I'm not going to use a CDN and have added the robots tag back.

I'm opening a few PRs now, and I've noticed that the checks don't pass. Could you take a look at this?

Seems like I once mentioned in another PR (see here) that a migration is missing.

[robinheidrich]

I also just noticed that the Codacy badge in the README doesn't load, and the website only returns 404 🤔

https://www.codacy.com/app/phpMyAdmin/website

[williamdes]

I also just noticed that the Codacy badge in the README doesn't load, and the website only returns 404 🤔

https://www.codacy.com/app/phpMyAdmin/website

I did login to Codacy, the setup was not approved nor done. I will remove it: I need test commits as I try to fix our mailing list hook ^^

[williamdes]

Done, and it works: https://lists.phpmyadmin.net/mailman3/hyperkitty/list/git@phpmyadmin.net/thread/UD5XH2MGIKZ24SNZTCEZU6NCKYUVN5YZ/

[williamdes]

Ready for the next PR to try the spam new check ^^

[robinheidrich]

I'm currently preparing everything for the PR for the layout update. I can't do several PRs for this because everything is interdependent.

While I'm at it, I also refreshed the 404 page:

And the news on the home page:

But I could do the PR for the unused files I was talking about. test-data, sponsors-subscribe.html and contest.html. Unless contest is to remain for historical purposes.

[williamdes]

But I could do the PR for the unused files I was talking about. test-data, sponsors-subscribe.html and contest.html. Unless contest is to remain for historical purposes.

Let's do a list of items and keep this one for the end maybe