Location: Asia Pacific, Cyberspace, in the Dark Dystopia
Posts: 19,118
Thanks Given: 2,351
Thanked 3,359 Times in 1,878 Posts
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:
A member dashboard with a number of member specific metrics and subscriptions (members only):
A dashboard for overall server performance (members only) which updates every 10 seconds:
You (members only) can view your profile here:
You (members only) can update your profile info and avatar here:
You (members only) can see your subscribed discussions here:
You (members only) can see the "members online information" here:
You can see "Today's Discussions" here:
You can see the last 200 posts here:
You can see the last 200 badge awards here:
You (members only) can see your last 200 posts here:
There is a menu of links (members only) to your contributions here:
Here is a menu to your PM and user notes pages here (members only) :
There is a menu to your other forum account settings here (members only):
Of course there is a login page (and a new member registration page) here:
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.
Location: Asia Pacific, Cyberspace, in the Dark Dystopia
Posts: 19,118
Thanks Given: 2,351
Thanked 3,359 Times in 1,878 Posts
Quote:
Originally Posted by Don Cragun
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:
Update: UserCP Screeching Frog 0.7641 - Changed Live Chat to Live Updates
In this version of the UserCP, I have changed "Live Chat" to "Live Updates" by disabling the ability to post in the "live chat" area and changed the name to "Live Updates"
The reason for this change is that experienced... (6 Replies)
Here is my second live video screencast (in my life, using Camtasia) with voice for the new usercp:
Overview of the Vue.js UserCP @UNIX.com
Shout outs to Don Cragun, Corona688, Rudi, Wolf, Made in Germany, stomp, Ravinder, Creative Tim, PubNub and others in the video. Thanks.
If you are... (1 Reply)
Update!
UserCP Screeching Frog 0.7485
Created a new page for uploaded a profile picture (profile pictures are different than avatar pictures).
https://www.unix.com/usercp/#/settings/other
https://www.unix.com/members/1-albums225-picture1158.png
... (0 Replies)
A number of people have asked me how to get started with Vue.js and my reply before today was to Google "Vue.js". That has changed and my recommendation to anyone who wants to learn the fastest growing, easiest to learn and use Vue.js web dev framework is to watch this video tutorial series:
... (0 Replies)
Vue Router has some quirks and on of the quirks is that it is not reliable when adding external links using the vue-router library.
After struggling with many solutions, I have found that creating a simple Vue.js component like this one seems to work the best (so far):
Component Example: ... (0 Replies)
Yea.... something I thought would take me an hour ended up taking most of the day. Well, it's not like those YT video tutorials where it take a week or more to make a video and the guys (gals) make it look so easy. But having said that, I'm happy to share with forum members the first "My... (6 Replies)
Continuing to think Vue.js is AWESOME, we now have a new badges timeline in version 0.26 of the UserCP Mockup:
https://www.unix.com/cp/index.php#/pages/badges
Changes:
Added Mockup from Badges timeline.
Changed notifications (upper right) to use v-for: bindings.
Fixes minor vue routing... (0 Replies)
Well, thanks to the amazing power of Vue.js, we now have a new timeline in version 0.23 of the UserCP Mockup:
Wow! I'm really impressed with Vue.js.
https://www.unix.com/cp/index.php#/pages/timeline
In this version:
Created database, and PHP model for the remote AJAX (Axios) call to... (1 Reply)
Here is the query (and some sample results) I plan to use to build a new timeline page in the mockup vue.js usercp I am working on.
When the postid is the same as lastpostid, this means the timeline entry will be - "{{Member}} Started Discussion {{Thread Title}} at {{date and time}}" and when... (4 Replies)
Vue.js UserCP Mockup Version 0.20 - Badge Notifications
https://www.unix.com/cp/index.php#/dashboardIn this mockup release:
Badge Notifications are working with live data: Upper Right (see image)
Added Axios to Vue and changed large table updates to axios (ajax)
Note: Will reformat... (2 Replies)