UserCP Screeching Frog 0.7446 Using Vue.js


 
Thread Tools Search this Thread
The Lounge What is on Your Mind? UserCP Screeching Frog 0.7446 Using Vue.js
# 1  
Old 04-01-2019
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:

Image

On mobile, in landscape mode:

Image

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

An overall forum dashboard with a number of forum metrics:

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

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

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

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

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

You (members only) can view your profile here:

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

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

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

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

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

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

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

You can see "Today's Discussions" here:

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

You can see the last 200 posts here:

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

You can see the last 200 badge awards here:

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

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

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

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

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

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

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

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

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

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

Code:
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.
# 2  
Old 04-01-2019
Just out of curiosity, why is it called Screeching Frog? Enquiring minds want to know...
# 3  
Old 04-01-2019
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:


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

Might as well have some fun, while developing all this software Smilie
This User Gave Thanks to Neo For This Post:
# 4  
Old 04-01-2019
UserCP Screeching Frog 0.7450

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

JS Source:

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

# 5  
Old 04-02-2019
FYI... see this discussion for info on clearing various browser caches:

Instructions to Clear Data Cache in Safari, Chrome, Firefox, Opera Browsers
# 6  
Old 04-03-2019
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).
# 7  
Old 04-07-2019
UserCP Screeching Frog 0.7460

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

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

Login or Register to Ask a Question

Previous Thread | Next Thread

10 More Discussions You Might Find Interesting

1. What is on Your Mind?

Update: UserCP Screeching Frog 0.7641 - Changed Live Chat to Live Updates

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)
Discussion started by: Neo
6 Replies

2. What is on Your Mind?

Video Overview of the Vue.js UserCP @UNIX.com

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)
Discussion started by: Neo
1 Replies

3. What is on Your Mind?

New UserCP Update Profile Image Page (UserCP Screeching Frog 0.7485)

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)
Discussion started by: Neo
0 Replies

4. Web Development

Vue JS 2 Tutorial by The Net Ninja: A Recommended Vue.js Video Tutorial Series

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)
Discussion started by: Neo
0 Replies

5. Web Development

Simple Vue.js Component to Redirect to External Web Page Using Vue Router

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)
Discussion started by: Neo
0 Replies

6. What is on Your Mind?

My Charts in the Prototype Vue.js UserCP

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)
Discussion started by: Neo
6 Replies

7. Web Development

New Badge Timeline in Vue.js UserCP Mockup

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)
Discussion started by: Neo
0 Replies

8. Web Development

New Discussion Timeline in Vue.js UserCP Mockup

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)
Discussion started by: Neo
1 Replies

9. Web Development

MySQL Query to Build Mockup Vue.js UserCP Timeline Page

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)
Discussion started by: Neo
4 Replies

10. Web Development

Vue.js UserCP Mockup Version 0.20 - Badge Notifications

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)
Discussion started by: Neo
2 Replies
Login or Register to Ask a Question