DevLog 2: Better UX

The UX was severely lacking before, so I am focusing more on fixing that this time.

Starting with the login and registration pages, since that’s what the user would see first.

Better error handling

On the initial launch, we prompt the user/webmaster to create an administrator. Because at least one user needs to be present for the website to be usable, and they should be an admin.

This was already done, but there was no user feedback if something goes wrong. So refined error messages for login, registration, and admin creation forms because they are all very similar.

Now, we provide more specific feedback for unique constraint violations (e.g., existing email or username), and hits about database errors (not actual errors, duh) to prompt the admin to investigate.

Better semantics

Next is the semantics, I noticed that the bootstrap default styles heavily rely on the div tags, see examples for alerts to see what I mean.

It was annoying, so refactored all Tera templates to adhere to semantic HTML best practices.

• Replaced non-semantic div and span elements with appropriate tags such as <article>, <section>, <header>, <footer>, <nav>, and <p>.
• Ensure that form elements are properly using in <label> tags for improved accessibility and structure.

I also added better support for IndieWeb and microformats2 by using h-card, h-entry, h-feed where possible.

Better UX for settings page and navigation

• Grouped management links (“Categories”, “Navbar”, “Users”) under a single “Management” card for better organization.
• Replaced button-style links with a Bootstrap list group for a cleaner appearance.
• Added Bootstrap Icons to the management links to improve visual clarity and user experience.
• Added ability to update position of category in the navbar
• Added Icons for categories for better visual appeal using bootstrap icons

Improved image management system

• Dedicated Image Management:
  • Created a new page at /uploads/manage for users to upload and manage their images.
  • Users can view their uploaded images and copy their URLs.
• Post Editor Integration:
  • Replaced the old image upload field in the post editor with a “Manage Images” button.

Progressive enhancement

I try to keep progressive enhancement as much as possible, because I want the site to be usable without JavaScript and some browsers that do not support it.

Maybe I should add a toggle for JavaScript, but that will come later. For now, I use dialogues only when JavaScript is enabled. I know that dialog element exists, but that doesn’t always work the way I want to. So instead, I create a separate page for all dialogues and open those when JavaScript is not loaded.

There are more things I want to improve, but I feel like I am already rushing, so let’s start focusing more on the important things like this from now on.