UserCP Screeching Frog 0.7446 Using Vue.js

Here is a status update on the new forum usercp.

  • The current version of the new UserCP is Screeching Frog v0.7446.
  • Most users will need to clear the files from your browser cache, quit and restart your browser to see the new version (check bottom of the page for version). Safari seems to clear the best, followed by Chrome. Firefox and Opera browsers can be tricky to get the caches updated, at least for me.
  • Screeching Frog v0.7446 has been tested fairly extensively and has few known bugs.
  • The default mode for Screeching Frog is "light mode" with a dark sidebar. The dark sidebar selection is a new feature I just added. You can change this in floating settings gear on the right side.

On mobile, the sidebar looks likes this:

On mobile, in landscape mode:

Basically, there are a lot of features in Screeching Frog v0.7446 including:

An overall forum dashboard with a number of forum metrics:

https://www.unix.com/usercp/#/dashboard

A member dashboard with a number of member specific metrics and subscriptions (members only):

https://www.unix.com/usercp/#/memberdash

A dashboard for overall server performance (members only) which updates every 10 seconds:

https://www.unix.com/usercp/#/server

You (members only) can view your profile here:

https://www.unix.com/usercp/#/viewprofile

You (members only) can update your profile info and avatar here:

https://www.unix.com/usercp/#/settings/editprofile

You (members only) can see your subscribed discussions here:

https://www.unix.com/usercp/#/subscribed

You (members only) can see the "members online information" here:

https://www.unix.com/usercp/#/online

You can see "Today's Discussions" here:

https://www.unix.com/usercp/#/today

You can see the last 200 posts here:

https://www.unix.com/usercp/#/poststimeline

You can see the last 200 badge awards here:

https://www.unix.com/usercp/#/badgestimeline

You (members only) can see your last 200 posts here:

https://www.unix.com/usercp/#/mypoststimeline

There is a menu of links (members only) to your contributions here:

https://www.unix.com/usercp/#/contributions

Here is a menu to your PM and user notes pages here (members only) :

https://www.unix.com/usercp/#/messages

There is a menu to your other forum account settings here (members only):

https://www.unix.com/usercp/#/settings/other

Of course there is a login page (and a new member registration page) here:

https://www.unix.com/usercp/#/login

There are more features coming and I will be moving more UserCP pages to Vue.js soon.

Known Bugs:

If you go directly to your member dashboard or do a page reload on that page (not routed from another page in the UserCP), the big chart at the top will not render until you click on the menu in the chart (or nav to another page in the UserCP app and back). This is not really noticable when in the app, unless you manually reload on that "member dash" page. There is some "deep bug" in Chart.js (or vue-chart.js) which is causing this rendering / reactivity problem and I'll figure it out someday. It's a small bug, but it is annoying.

Future Pages:

I'm going to move more UserCP pages over to Vue.js, including updating user options, changing email and passwords, etc. Right now those functions are still being done on the original forum pages (linked to the new usercp via menu pages).

Also, I'm going to create new "user profile" pages where people can view a members profile, at some point in time using a subset of the usercp pages (with more restrictions, and privacy options. This is just a specialized case of the usercp and is not difficult to do , it is just time consuming.

Summary

"Screeching Frog" is fully working Vue.js UserCP and it is working well, based on my testing and the user logs with live users. Because we are in development (live) I have the caching period set to zero (trying to get browsers to update often) and so initial loading will be slow for some users. However, after the app is loaded, it will be faster than before. That is the trade off, of course when using an AJAX based SPA Javascript app. I will add more "loading bars" in the future for an even better user experience.

I would like to thank the Moderators for all their great work moderating the forums, giving me more time to code for the forums and for helping me test certain features and pages. I am not planning any change to the badging system or the original forum pages in the near to intermediate future until I get the new UserCP further down the road.

Thank you all for your patience.

I apologize that the JS usercp app, during development, requires most people to quit their browser and restart to clear and reload the new Javascript versions, but I don't have a work around for that. If you are using Safari, for some reason Safari works great and clears and reloads files (JS apps) easily, but FF and Opera can be a "real, core PITA" to constantly manage the browser cache. Chrome works OK, but the cache often times (in Chrome) does not clear as properly and robustly as Safari, but Chome is much better at cache management than FF and Opera. Safari wins in that area (at least on MacOS where I do all my software development). I don't have time to go down the browser rabbit hole to understand why and how some browsers are "great" and others are "really a PITA" when in comes to user cache management, but this site (unix.com) fully supports Chrome (by far the market leader) and Safari (because it works so great, consistently across the board), so if you want all the great features on unix.com to work, please use either Chrome or Safair. FF and Opera are not officially supported for a number of reasons.

Hope this summary for Screeching Frog 0.7446 was helpful.

Please feel free to comment if you want to, but don't feel bad if I do not implement your ideas or suggestions right away (especially if it relates to colors, formatting, style), or at all, as I have to set priorities and manage my software development time and my own "critical path" for getting things done. Sometimes I need to take a break from all the hard core Javascript coding as well. It's a lot of work!

Having said that, your feedback is always welcome and very important, and I eventually get around to addressing every comment and suggestion; but it might not be a "immediate" as you might want.

Thanks again!

Enjoy!

PS: If you cannot get Screeching Frog v0.7446 to load in your browser (after clearing your cache, quitting your browser and restarting), please post back with details and I'll help explain to you what you need to do (Safari, Chrome, FF, Opera, as I have these all on my development MacPro). Cheers.

Just out of curiosity, why is it called Screeching Frog? Enquiring minds want to know...

I wanted to have names for major releases of the UserCP, and so I Googled "types of frogs" and I thought "Screeching Frog" sounded cool from this site:

A List of All Types of Frogs and Toads With Amazing Pictures

Might as well have some fun, while developing all this software :slight_smile:

1 Like

UserCP Screeching Frog 0.7450

Added page preloader (spinner) for loading AJAX-related pages and AJAX data from server.

JS Source:

https://gasparesganga.com/labs/jquery-loading-overlay/

FYI... see this discussion for info on clearing various browser caches:

Instructions to Clear Data Cache in Safari, Chrome, Firefox, Opera Browsers

FYI:

UserCP Screeching Frog 0.7458

Changed the "click" property for the stats badges in the forum and member dashboards.

Now can click anywhere in the stats card to go the link in the card (ease of use).

UserCP Screeching Frog 0.7460

Added "user card link" to a users PM sent box here:

https://www.unix.com/usercp/#/messages

Current version:

UserCP Screeching Frog 0.7465

Ref: Strong Passwords for the Forum Login

After I build the new usercp page for changing works which includes the validation regex, I'll connect the dots.

The later on this year (not sure when), I will force password changes which are "weak" when a user logins.

Cheers.

Update:

UserCP Screeching Frog 0.7493

All seems to be well in the current version of the usercp, so I may give the coding a rest for a few days and focus on other major project I have which are falling behind.

In addition, for new visitors, I have see the cache control to:

<meta http-equiv=Cache-Control content="max-age=86400,private">

Not really sure this cache control will make any difference, but during my heavy development period it was:

<meta http-equiv=Cache-Control content="max-age=300, no-cache, must-revalidate">

Honestly, none of the cache control directive in the HTML meta data seems to really work well.....

I recently changed the way webpack optimized the chunks, and noticed a huge performance gain:

After taking a much needed break, I will decide on that parts of the big elephant to recode next.

Enjoy!

UserCP Screeching Frog 0.7617

Added "Create Account" to sidebar for guest users.